<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <style type="text/css">
    #box {
      margin: 0 auto;
      background: lightblue;
      height: 300px;
      width: 300px;
      overflow: auto;
      overflow-x: hidden;
      transition: all .5s linear;
    }

    #box>#container {
      width: 1200px;
      height: 300px;
      background: lightslategray;
      display: flex;
    }

    #box>#container>div:nth-child(1) {
      height: 300px;
      width: 20vw;
      background: black;
    }

    #box>#container>div:nth-child(2) {
      height: 300px;
      width: 20vw;
      background: lightgreen;
    }

    #box>#container>div:nth-child(3) {
      height: 300px;
      width: 20vw;
      background: lightpink;
    }

    #box>#container>.container>div:nth-child(4) {
      height: 300px;
      width: 20vw;
      background: lightseagreen;
    }

    #box>#container>div:nth-child(5) {
      height: 300px;
      width: 20vw;
      background: lightsalmon;
    }

    #left {
      top: 20%;
      position: absolute;
      height: 20px;
      width: 20px;
      background: lightyellow;
      z-index: 99;
    }

    #right {
      top: 20%;
      margin-left: 14.8%;
      position: absolute;
      height: 20px;
      width: 20px;
      background: red;
    }
  </style>
</head>

<body>
  <div id="box">
    <div id="left">
      < </div>
        <div id="right">
          >
        </div>
        <div id="container">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
    </div>
</body>
<script type="text/javascript">
  var container = document.getElementById('box');
  console.log(container);
  var left = document.getElementById('left').onclick = function () {
    var a = 0;
    var ss = setInterval(function () {
      console.log(3);
      a++;
      //向左移动200px
      if (a < 300) {
        //scrollBy() 方法可把内容滚动指定的像素数。
        container.scrollBy(-1, 0);
      } else {
        //然后清除
        clearInterval(ss);
      }
    }, 0.5)
  };

  //同上
  var right = document.getElementById('right').onclick = function () {
    var r = 0;
    var qq = setInterval(function () {
      console.log(4);
      r++;
      if (r < 300) {
        container.scrollBy(1, 0);
      } else {
        clearInterval(qq);
      }
    }, 0.5)
  };
  //第一题
</script>

</html>